<svg title="multiplication"
  viewBox="-195 -155 390 310"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  >
  <defs>
    <style type="text/css">
        svg { --fg: black; --bg: white; } /* light mode */

        .fig1 .stroke {
          stroke-width: 2;
          stroke: black; /* fallback when css variables are not supported */
          stroke: var(--fg);
        }

        .nofill {
          fill: none;
        }

        .fillbg {
          fill: white;
          fill: var(--bg);
        }

        .fillfg {
          fill: black;
          fill: var(--fg);
        }
      </style>
  </defs>
  <g class="fig1">
    <g display="none" title="debug" >
      <rect title="viewbox" x="0" y="0" width="400" height="400" transform="translate(-200 -200)" stroke="red" stroke-width="2" fill="none" />
      <rect display="none" title="inner box" x="40" y="150" width="300" height="105" transform="translate(-200 -200) translate(10)" stroke="red" stroke-width="1" fill="none" />
      <line title="ycenter" x1="-999" x2="999" y1="0" y2="0" stroke="red" stroke-width="1"/>
      <line title="xcenter" x1="0" x2="0" y1="-999" y2="999" stroke="red" stroke-width="1"/>
      <circle cx="0" cy="0" r="100" fill="none" stroke="red" />
      <circle cx="0" cy="0" r="140" fill="none" stroke="red" />
    </g>
    <path title="big arc bottom" d="M -130 0 m 90 0 h -90 A 130 130 0 0 0 130 0 h -90" fill="none" stroke="black" stroke-width="2"/>
    <g>
      <g stroke="black" stroke-width="2">
        <path id="arrow" d="M 0,0 m 0,50 l 0,30 m 0,-30 m 10,10 l -10,-10 l -10,10" fill="none"/>
        <use xlink:href="#arrow" transform="rotate(60)"/>
        <use xlink:href="#arrow" transform="rotate(-60)"/>
        <use xlink:href="#arrow" transform="translate(0 -130)"/>
        <g id="segmentborder" transform="scale(-1 -1)">
          <path d="M 0 -40 V -130" transform="rotate(30)"/>
          <path d="M 0 -40 V -130" transform="rotate(-30)"/>
        </g>
      </g>
      <g title="" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40" fill="black" class="fillfg">
        <text title="times 3" x="0" y="10">3</text>
        <path title="small arc top" d="M -40 0 A 40 40 0 0 0 40 0" fill="none" stroke="black" stroke-width="2"/>
        <path title="small arc bottom left" d="M -40 0 A 40 40 0 0 0 0 -40" fill="none" stroke="black" stroke-width="2"/>
        <path title="small arc bottom right" d="M 40 0 A 40 40 0 0 1 0 -40" fill="none" stroke="black" stroke-width="2"/>
        <text id="input" transform="translate(0 -110)">6</text>
        <text id="output" transform="translate(0 110)">2</text>
        <use display="" xlink:href="#output" transform-origin="0 110" transform="translate(0 -110) rotate(60) translate(0 110) rotate(-60)" />
        <use display="" xlink:href="#output" transform-origin="0 110" transform="translate(0 -110) rotate(-60) translate(0 110) rotate(60)" />
      </g>
    </g>
  </g>
</svg>
